<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>百货购物平台</title>
	<link rel="stylesheet" href="layui-v2.9.20/layui/css/layui.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<!-- 引入 jQuery 库 -->
	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
	<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
		}

		body {
			background-color: #fafafa;
		}

		/* 顶部导航栏 - 全新粉色风格 */
		.header-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: linear-gradient(135deg, #ffecef 0%, #fff0f3 100%);
			padding: 0 40px;
			box-shadow: 0 4px 20px rgba(255, 156, 176, 0.15);
			position: relative;
			z-index: 1000;
			height: 70px;
			border-bottom: 1px solid #ffdde4;
		}

		.logo {
			display: flex;
			align-items: center;
			font-size: 28px;
			font-weight: 800;
			color: #ff4d7a;
			text-shadow: 1px 1px 3px rgba(255, 77, 122, 0.2);
		}

		.logo i {
			margin-right: 10px;
			font-size: 32px;
		}

		.nav-menu {
			display: flex;
			list-style: none;
			height: 100%;
		}

		.nav-menu li {
			display: flex;
			align-items: center;
			position: relative;
			padding: 0 20px;
			cursor: pointer;
			transition: all 0.3s ease;
			height: 100%;
		}

		.nav-menu li a {
			text-decoration: none;
			color: #ff4d7a;
			font-size: 16px;
			font-weight: 600;
			display: flex;
			align-items: center;
			height: 100%;
			padding: 0 5px;
			transition: all 0.3s;
		}

		.nav-menu li a i {
			margin-right: 8px;
			font-size: 18px;
		}

		.nav-menu li:hover {
			background: rgba(255, 255, 255, 0.5);
		}

		.nav-menu li.active {
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
		}

		.nav-menu li.active::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			height: 3px;
			background: linear-gradient(to right, #ff8da1, #ff4d7a);
			border-radius: 3px 3px 0 0;
		}

		.nav-menu li.active a {
			color: #e6004c;
		}

		/* 搜索框样式 - 已优化 */
		.search-container {
			background-color: #fff;
			padding: 0;
			position: sticky;
			top: 0;
			z-index: 999;
			box-shadow: 0 2px 15px rgba(0,0,0,0.05);
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 90px;
		}

		.search-box {
			width: 700px;
			margin: 0 auto;
			display: flex;
			border: 2px solid #ff4d7a;
			border-radius: 8px;
			overflow: hidden;
			box-shadow: 0 5px 15px rgba(255, 77, 122, 0.2);
			height: 52px;
		}

		.search-select {
			padding: 0 15px;
			background: #fff;
			border: none;
			border-right: 1px solid #eee;
			outline: none;
			color: #ff4d7a;
			font-weight: 500;
			width: 130px;
			appearance: none;
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ff4d7a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
			background-repeat: no-repeat;
			background-position: right 10px center;
			background-size: 16px;
			cursor: pointer;
		}

		.search-select:focus {
			background-color: #fff9fb;
		}

		.search-input-container {
			flex: 1;
			display: flex;
			align-items: center;
			position: relative;
		}

		.search-input {
			flex: 1;
			border: none;
			padding: 0 20px 0 45px;
			font-size: 16px;
			outline: none;
			color: #333;
			height: 100%;
		}

		.search-icon {
			position: absolute;
			left: 15px;
			color: #999;
			font-size: 18px;
		}

		.search-button {
			background: linear-gradient(135deg, #ff4d7a 0%, #ff8da1 100%);
			color: white;
			border: none;
			padding: 0 35px;
			font-size: 17px;
			font-weight: 600;
			cursor: pointer;
			transition: all 0.3s;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.search-button:hover {
			background: linear-gradient(135deg, #ff3366 0%, #ff7799 100%);
		}

		/* 轮播图容器样式 */
		.carousel-container {
			width: 100%;
			display: flex;
			justify-content: center;
			margin-top: 30px;
		}

		#main-carousel {
			width: 80%;
			height: 450px;
			border-radius: 15px;
			overflow: hidden;
			box-shadow: 0 10px 30px rgba(255, 141, 161, 0.3);
		}

		/* 图片自适应轮播框大小且不变形 */
		.layui-carousel img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		/* 首页商品区域样式 */
		.product-section {
			max-width: 1400px;
			margin: 40px auto;
			padding: 0 20px;
		}

		.section-title {
			position: relative;
			font-size: 26px;
			margin: 35px 0 25px;
			padding-left: 15px;
			color: #ff4d7a;
			font-weight: 700;
		}

		.section-title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 8px;
			bottom: 8px;
			width: 5px;
			background: linear-gradient(to bottom, #ff8da1, #ff4d7a);
			border-radius: 5px;
		}

		.product-grid {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
			gap: 25px;
		}

		.product-card {
			background-color: #fff;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 5px 20px rgba(0,0,0,0.08);
			transition: all 0.4s ease;
			position: relative;
			cursor: pointer; /* 添加手型光标 */
		}

		.product-card:hover {
			transform: translateY(-10px);
			box-shadow: 0 12px 30px rgba(255, 141, 161, 0.25);
		}

		.product-img {
			width: 100%;
			height: 220px;
			overflow: hidden;
			position: relative;
		}

		.product-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s;
		}

		.product-card:hover .product-img img {
			transform: scale(1.08);
		}

		.product-info {
			padding: 20px;
		}

		.product-title {
			font-size: 16px;
			color: #333;
			margin-bottom: 12px;
			height: 44px;
			overflow: hidden;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			line-height: 1.4;
		}

		.product-price {
			color: #ff4d7a;
			font-size: 22px;
			font-weight: bold;
			margin-top: 5px;
		}

		.product-sales {
			font-size: 14px;
			color: #888;
			margin-top: 8px;
		}

		.product-tag {
			position: absolute;
			top: 15px;
			right: 15px;
			background: linear-gradient(135deg, #ff8da1 0%, #ff4d7a 100%);
			color: white;
			padding: 5px 12px;
			border-radius: 20px;
			font-size: 12px;
			font-weight: 600;
			box-shadow: 0 3px 10px rgba(255, 141, 161, 0.4);
		}

		/* 页脚样式 */
		.footer {
			background: linear-gradient(135deg, #343a40 0%, #23272b 100%);
			color: #fff;
			padding: 50px 0 30px;
			margin-top: 70px;
		}

		.footer-content {
			max-width: 1200px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 35px;
			padding: 0 20px;
		}

		.footer-column h3 {
			font-size: 20px;
			margin-bottom: 22px;
			padding-bottom: 12px;
			border-bottom: 2px solid #ff4d7a;
			color: #fff;
		}

		.footer-column ul {
			list-style: none;
		}

		.footer-column li {
			margin-bottom: 14px;
		}

		.footer-column a {
			color: #ddd;
			text-decoration: none;
			transition: all 0.3s;
			display: flex;
			align-items: center;
		}

		.footer-column a i {
			margin-right: 8px;
			color: #ff8da1;
		}

		.footer-column a:hover {
			color: #ff8da1;
			transform: translateX(5px);
		}

		.copyright {
			text-align: center;
			padding-top: 40px;
			margin-top: 40px;
			border-top: 1px solid #444;
			color: #aaa;
			font-size: 14px;
			max-width: 1200px;
			margin: 40px auto 0;
		}

		/* 响应式调整 */
		@media (max-width: 992px) {
			.product-grid {
				grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
			}

			.footer-content {
				grid-template-columns: repeat(2, 1fr);
			}
		}

		@media (max-width: 768px) {
			.header-container {
				flex-direction: column;
				height: auto;
				padding: 15px;
			}

			.nav-menu {
				width: 100%;
				margin-top: 15px;
				justify-content: center;
			}

			.nav-menu li {
				padding: 10px 15px;
			}

			#main-carousel {
				width: 95%;
				height: 350px;
			}

			.product-grid {
				grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
				gap: 18px;
			}

			.search-box {
				width: 90%;
			}
		}

		@media (max-width: 576px) {
			.nav-menu {
				flex-wrap: wrap;
			}

			.nav-menu li {
				padding: 8px 12px;
			}

			.search-box {
				flex-direction: column;
				border-radius: 15px;
				height: auto;
			}

			.search-select {
				width: 100%;
				padding: 12px 20px;
				border-right: none;
				border-bottom: 1px solid #eee;
				height: 50px;
			}

			.search-input-container {
				width: 100%;
			}

			.search-input {
				padding: 12px 20px 12px 45px;
				height: 50px;
			}

			.search-icon {
				left: 20px;
			}

			.search-button {
				padding: 15px;
				height: 50px;
			}

			.product-grid {
				grid-template-columns: 1fr 1fr;
				gap: 15px;
			}

			.footer-content {
				grid-template-columns: 1fr;
			}
		}
	</style>
</head>
<body>
<!-- 顶部导航栏 - 全新粉色风格 -->
<div class="header-container">
	<div class="logo">
		<i class="fas fa-shopping-bag"></i>
		<span>百货购物平台</span>
	</div>
	<ul class="nav-menu">
		<li class="active">
			<a href="#"><i class="fas fa-home"></i> 首页</a>
		</li>
		<li>
			<a href="cart item.html"><i class="fas fa-shopping-cart"></i> 购物车</a>
		</li>
		<li>
			<a href="checkout.html"><i class="fas fa-shopping-cart"></i> 结算</a>
		</li>
		<li>
			<a href="order.html"><i class="fas fa-file-invoice"></i> 我的订单</a>
		</li>
		<li>
			<a href="person_center.html"><i class="fas fa-user-circle"></i> 个人中心</a>
		</li>
		<li>
			<a href="customer_service.html"><i class="fas fa-headset"></i> 官方客服</a>
		</li>
	</ul>
</div>

<!-- 搜索框 - 已优化 -->
<div class="search-container">
	<div class="search-box">
<!--		<select class="search-select">-->
<!--			<option value="" disabled selected>全部商品</option>-->
<!--			<option value="AAA">女装</option>-->
<!--			<option value="BBB">男装</option>-->
<!--			<option value="CCC">美妆</option>-->
<!--			<option value="DDD">数码</option>-->
<!--			<option value="EEE">食品</option>-->
<!--		</select>-->
		<div class="search-input-container">
			<i class="fas fa-search search-icon"></i>
			<input type="text" class="search-input" placeholder="输入搜索关键字...">
		</div>
		<button class="search-button">搜索</button>
	</div>
</div>

<!-- 轮播图 -->
<div class="carousel-container">
	<div class="layui-carousel" id="main-carousel">
		<div carousel-item>
			<div><img src="https://images.unsplash.com/photo-1542838132-92c53300491e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="水果"></div>
			<div><img src="https://images.unsplash.com/photo-1565958011703-44f9829ba187?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="舒芙蕾"></div>
			<div><img src="https://images.unsplash.com/photo-1596462502278-27bfdc403348?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1200&q=80" alt="薇诺娜"></div>
		</div>
	</div>
</div>

<!-- 首页商品区域 -->
<div class="product-section">
	<h2 class="section-title">热销商品</h2>
	<div class="product-grid" id="hot-products"></div>
</div>

<footer class="footer">
	<div class="footer-content">
		<!-- 页脚内容 -->
	</div>
	<div class="copyright">
		&copy; 2024 百货购物平台. All rights reserved.
	</div>
</footer>

<script src="layui-v2.9.20/layui/layui.js"></script>
<script>
	layui.use(['carousel', 'element'], function(){
		var carousel = layui.carousel;
		var element = layui.element;

		// 轮播图初始化
		carousel.render({
			elem: '#main-carousel',
			width: '100%',
			height: '450px',
			arrow: 'always',
			anim: 'fade',
			interval: 3000
		});

		// 设置导航菜单激活状态
		document.querySelectorAll('.nav-menu li').forEach(item => {
			item.addEventListener('click', function() {
				document.querySelectorAll('.nav-menu li').forEach(i => {
					i.classList.remove('active');
				});
				this.classList.add('active');
			});
		});
	});

	// 获取后端基础URL - 解决跨域问题
	function getBackendBaseUrl() {
		// 根据当前环境确定后端URL
		if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
			return 'http://localhost:8080';
		}
		// 生产环境使用相同域名
		return window.location.origin;
	}
	$.ajax({
		url: getBackendBaseUrl() + '/product/ProductIndex',
		method: 'GET',
		success: function(response) {
			if (response.code === 200) {
				const products = response.data;
				const hotProductGrid = document.getElementById('hot-products');
				hotProductGrid.innerHTML = ''; 

				products.forEach(product => {
					const card = createProductCard(product);
					hotProductGrid.appendChild(card);
				});
			} else {
				console.error('请求失败：', response.message);
			}
		},
		error: function(error) {
			console.error('AJAX请求错误：', error);
		}
	});

	function createProductCard(product) {
		const card = document.createElement('div');
		card.classList.add('product-card');
		card.addEventListener('click', function() {
			window.location.href = `product_details.html?id=${product.id}`;
		});

		const imgDiv = document.createElement('div');
		imgDiv.classList.add('product-img');
		const img = document.createElement('img');
		img.src = product.masterPicUrl || 'https://via.placeholder.com/300'; // 使用后端返回的图片URL
		img.alt = product.title || '商品图片';
		imgDiv.appendChild(img);

		const infoDiv = document.createElement('div');
		infoDiv.classList.add('product-info');

		const title = document.createElement('div');
		title.classList.add('product-title');
		title.textContent = product.title || '商品名称'; // 使用后端返回的标题

		const price = document.createElement('div');
		price.classList.add('product-price');
		price.textContent = `¥${product.price?.toFixed(2) || '0.00'}`; // 使用后端返回的价格

		infoDiv.appendChild(title);
		infoDiv.appendChild(price);

		card.appendChild(imgDiv);
		card.appendChild(infoDiv);

		return card;
	}
</script>
</body>
</html>